// Place all the styles related to the Posts controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
#container-area{
  .blog-list{
    margin-bottom: 20px;
    .post-item{
      padding: 20px 0 10px 0;
      border-bottom: 1px solid #efefef;
      &:first-child{
        padding-top: 10px;
      }
      .post-title{
        a{
          color: #333;
          font-size: 24px;
          &:hover{
            color: #25a1a2;
            text-decoration: none;
          }
        }
      }
      .post-intro{
        font-size: 14px;
        margin-bottom: 5px;
        color: #777777;
        line-height: 22px;
      }
      .post-detail{
        font-size: 14px;
        color: #999999;
        .detail-item{
          font-size: 13px;
          display: inline;
          padding-right: 12px;
          a{
            color: #999;
            &:hover{
              text-decoration: none;
              color: #25a1a2;
            }
          }
          &:last-child{
            font-size: 14px;
          }
          .fa-tags{
            color: #bbb;
          }
        }
      }
    }
  }
  .blog-paginator{
    a{
      color: #9c9c9c;
      font-size: 15px;
      &:hover{
        color: #25a1a2;
      }
    }
    .newer{
      float: left;
      padding-bottom: 20px;
    }
    .older{
      float: right;
      padding-bottom: 20px;
    }
  }
  #post-show{
    .post-title{
      margin: 10px 0 0px 0;
      a{
        color: #333;
        &:hover{
          text-decoration: none;
          color: #25a1a2;
        }
      }
    }
    .post-detail{
      margin: 10px 0;
      color: #999999;
      .detail-item{
        font-size: 14px;
        display: inline-block;
        padding-right: 12px;
        a{
          color: #999;
          &:hover{
            text-decoration: none;
            color: #25a1a2;
          }
        }
        .fa-tags{
          color: #bbb;
        }
      }
    }
    .post-intro{
      font-size: 15px;
      color: #777;
      padding: 10px;
      margin: 15px 0;
      border: 1px solid #eee;
      border-left-width: 5px;
      border-radius: 3px;
      border-left-color: #25a1a2;
    }
  }
}

.new-article{
  padding-bottom: 30px;
  .fixed-area {
    position: fixed;
    bottom: 0;
    height: 34px;
    left: 225px;
    z-index: 9999;
    background: #141414;
    border-bottom: none;
    width: calc(100vw - 225px);
    box-shadow: 6px 0px 10px #4a4a4a;
    .content{
      position: absolute;
      top: 3px;
      .btn-sm{
        padding: 2px 16px;
        margin-left: 10px;
      }
      div[data-toggle="buttons"] label{
        padding: 0px 10px;
      }
    }
    #pages_content {
      left:  calc((100vw - 150px - 225px)/2);
    }
    #posts_content {
      left:  calc((100vw - 345px - 225px)/2);
    }
  }
}
@media screen and (max-width: 768px) {
  #wrapper {
    .fixed-area {
      width: calc(100vw);
      left: 0;
      #pages_content {
        left:  calc((100vw - 150px)/2);
      }
      #posts_content {
        left:  calc((100vw - 345px)/2);
      }
    }
  }
}